<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>最简单的轮播广告</title>
  <style>
body, div, ul, li {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style-type: none;
        }
        body {
            background: #ccc;
            text-align: center;
            font: 12px/20px Arial;
        }
        #box {
            position: relative;
            width: 492px;
            height: 172px;
            background: #fff;
            border-radius: 5px;
            border: 8px solid #fff;
            margin: 10px auto;
        }
        #box .list {
            position: relative;
            width: 490px;
            height: 170px;
            overflow: hidden;
            border: 1px solid #ccc;
        }
        #box .list li {
            position: absolute;
            top: 0;
            left: 0;
            width: 490px;
            height: 170px;
            opacity: 0;
            transition: opacity 0.5s linear
        }
        #box .list li.current {
            opacity: 1;
        }
        #box .count {
            position: absolute;
            right: 0;
            bottom: 5px;
        }
        #box .count li {
            color: #fff;
            float: left;
            width: 20px;
            height: 20px;
            cursor: pointer;
            margin-right: 5px;
            overflow: hidden;
            background: #F90;
            opacity: 0.7;
            border-radius: 20px;
        }
        #box .count li.current {
            color: #fff;
            opacity: 0.7;
            font-weight: 700;
            background: #f00
        }
    </style>
  </head>
  <body>
   <div id="box">
    <ul class="list">
      <li class="current" style="opacity: 0;"><img src="images/4.jfif" width="490" height="170"></li>
      <li style="opacity: 0;"><img src="./images/1.jfif" width="490" height="170"></li>
      <li style="opacity: 1;"><img src="./images/2.jfif" width="490" height="170"></li>
      <li style="opacity: 0;"><img src="./images/3.jfif" width="490" height="170"></li>
      <li style="opacity: 0;"><img src="./images/p5.jpg" width="490" height="170"></li>
    </ul>
    <ul class="count">
      <li class="current">1</li>
      <li class="">2</li>
      <li class="">3</li>
      <li class="">4</li>
      <li class="">5</li>
    </ul>
   </div>

   <script>
        // dom获取元素 
        // 定时器  
        // 鼠标移入移出事件 


        // 获取元素

        var box = document.getElementById('box');
        var uls = box.getElementsByTagName('ul');
        var imgs = uls[0].getElementsByTagName('li');
        var btns = uls[1].getElementsByTagName('li');
        var index = 0;

        var play = null; // 存放定时器
        // 每个几秒做的事情 
        function showin(num){
            // 1.让所有的图片都隐藏
            // 2.让所有的按钮不高亮
            // 3.因为他们的长度一样 所以选择一个for
            for(var i=0;i<imgs.length;i++){
                imgs[i].style.opacity = 0;
                btns[i].className = '';
            }
            imgs[num].style.opacity = 1;
            btns[num].className = 'current';
        }

        autoplay(); // 调用定时器
        // 定时器
        var lock = true;
        function autoplay(){
            play = setInterval(function(){
                        
                        index++;  // 下一个图片
                        if(index>imgs.length-1){
                            // 判断是否越界 
                            index = 0; //强制从头开始
                        }
                        showin(index);
                    },1000)

        }
        // 鼠标移入移出事件
        box.onmouseover = function(){
            clearInterval(play);
        }

        box.onmouseout = function(){
            autoplay();
        }

        // 遍历按钮 给按钮添加点击鼠标移入
        for(var i=0;i<btns.length;i++){
            btns[i].dataset.index = i;
            btns[i].onmouseover = function(){
                showin(this.dataset.index); // i 每个按钮得到都是 5
                clearInterval(play);
                index = this.dataset.index; 
                // 轮播进行过程中 按照顺序进行
                // 用户突然选中自己想看的  也就是破坏了顺序 
                // 所以我们这里边 需要将 第几个按钮 传给当前页index
                // index 就会从下一页开始 
            }
        }

   </script>
</body>
</html>